//渲染公共部分
(function () {
  $(".index_top").load("http://localhost:81/html/public.html .top_wrap", function () {
    if ($.cookie("loadsuccess")) {
      $(".top_right").find("li").first().html("欢迎您" + $.cookie('loadsuccess') + "  <em>注销</em>")
      $(".load_top").html("<div class='userpart'>尊敬的用户" + $.cookie('loadsuccess') + "，您好    <em>注销</em></div>")
      $(".load_top").find("em").css({
        cursor: "pointer",
        color: "red"
      })
      $(".top_right").find("em").css({
        cursor: "pointer",
        color: "red"
      })

      $(".load_top").find("em").on("click", function () {
        $.cookie("loadsuccess", null)
        window.location.reload()
      })
      $(".top_right").find("em").on("click", function () {
        $.cookie("loadsuccess", null)
        window.location.reload()
      })
      //侧边栏
      $(".aside").replaceWith(`<aside>
      <div class="load_aside_wrap">
        <div class="load_aside_body">
          <div class="tool_list">
            <a href="##"
              ><div class="icon">
                <img src="http://localhost:81/images/bottom/pic1.png" alt="" />
              </div>
              <p>我的</p>
            </a>
            <a href="##"
              ><div class="icon">
                <img src="../images/bottom/pic2.png" alt="" />
              </div>
              <p>咨询</p>
            </a>
            <a href="http://localhost:81/html/cart.html"
              ><div class="icon">
                <img src="../images/bottom/pic3.png" alt="" />
              </div>
              <p>购<br/>
              物<br/>
              车</p>
            </a>
            <a href="##"
              ><div class="icon">
                <img src="../images/bottom/pic4.png" alt="" />
              </div>
              <p>优<br/>
              惠<br/>
              券</p>
            </a>
            <a href="##"
              ><div class="icon">
                <img src="../images/bottom/pic5.png" alt="" />
              </div>
            </a>
            <a href="##"
              ><div class="icon">
                <img src="../images/bottom/pic6.png" alt="" />
              </div>
            </a>
          </div>
        </div>
        <div class="load_aside_bottom">
          <div class="tool_list">
            <a href="##">
              <div class="icon">
                <img src="../images/bottom/pic7.png" alt="" />
              </div>
              <p>顶部</p>
            </a>
          </div>
        </div>
    </div>
    </aside>
    `)
      addEvent()
    }
  });

  function addEvent() {
    $(".load_aside_bottom").children("div").on("click", function () {
      $("html").stop().animate({
        scrollTop: 0
      }, 500)
    })
  }

  $(".index_header").load("http://localhost:81/html/public.html .logo_wrap");
  $(".index_nav").load("http://localhost:81/html/public.html .nav_wrap", function () {
    (function () {
      $(".nav_li").hover(
        function () {
          $(this)
            .css({
              background: "black",
            })
            .find(".menu")
            .css({
              display: "block",
            });
        },
        function () {
          $(this)
            .css({
              background: "",
            })
            .find(".menu")
            .css({
              display: "none",
            });
        }
      );
    })();
    (function () {

      $(".nav ul")
        .children("li")
        .not($(".nav_first_title"))
        .hover(
          function () {
            $(this)
              .css({
                background: "#f03a58",
                color: "#fff",
              })
              .children("a")
              .css({
                color: "#fff",
              });
          },
          function () {
            $(this)
              .css({
                background: "#fff",
                color: "#000",
              })
              .children("a")
              .css({
                color: "#000",
              });
          }
        );
    })();
  });
  $(".index_footer").load("http://localhost:81/html/public.html .footer_wrap");
  $(".index_bottom").load("http://localhost:81/html/public.html .bottom_wrap");


})();

(function () {
  $(".banner_wrap").banner({
    item: $(".banner_wrap a"),
    btn: false,
    list: true,
  });

  $(".banner a").on("click", function (event) {
    event.preventDefault();
  });
})();

//数据渲染页面   加楼层导航
(function () {
  $.ajax({
    async: true,
    url: "http://localhost:81/data/goods.json",
    type: "get",
    success: (res) => {
      res = JSON.parse(res)
      goodsAllMsg = res;
      render(res);
    },
    error: () => {
      alert(
        "请通过服务器连接，地址：http:localhost:81/html/index.html  服务器开启方式：node文件下打开终端，运行login.js"
      );
    },
  });

  function render(res) {

    let msgNum = res.msgNum;
    var str1 = "";
    var str3 = "";
    for (let j = 0; j < msgNum; j++) {
      //商品的渲染
      var goodsMsg = res.arr[j].inner.msg;
      var outerMsg = res.arr[j].outer;
      var rightMsg = res.arr[j].outer.link;
      var str2 = "";
      str3 += `<a style="cursor:pointer">${outerMsg.title}</a>`;
      for (let i = 0; i < goodsMsg.length; i++) {
        str2 += `<div class="goodscontent fl">
                <a data_id="${goodsMsg[i].Id}"  data_time="${j}"><img src="${goodsMsg[i].goodsmsg}" alt="" /></a>
                <div class="goodscontent_price">${goodsMsg[i].price2}</div>
                <div class="goodscontent_name">${goodsMsg[i].goods}</div>
                </div>`;
      }
      //商品外框的渲染
      str1 += `
              <div class="goods_wrap wrap">
              <div class="goods main">
              <div class="goods_top clearfix">
              <a href="##" class="fl">${outerMsg.title}</a>
              <div class="goods_top_right fr">
              <a href="http://localhost:81/html/shopping.html?time=${j}">${rightMsg[0]}</a>
              <a href="http://localhost:81/html/shopping.html?time=${j}">${rightMsg[1]}</a>
              <a href="http://localhost:81/html/shopping.html?time=${j}">${rightMsg[2]}</a>
              <a href="http://localhost:81/html/shopping.html?time=${j}">${rightMsg[3]}</a>
              <a href="http://localhost:81/html/shopping.html?time=${j}">${rightMsg[4]}</a>
              </div>
              </div>
              <div class="goods_bottom">
              <div class="goods_bottom_left fl">
              <a href="http://localhost:81/html/shopping.html?time=${j}">
              <img src=${outerMsg.img1} alt="" />
              </a>
              <a href="http://localhost:81/html/shopping.html?time=${j}">
              <img src=${outerMsg.img2} alt="" />
              </a>

              </div>
              <div class="goods_bottom_right fl">
              ${str2}
              </div>
              </div>
              <img src=${outerMsg.img3} alt="" class="goods_adv" />
              </div>
              </div>
              `;
    }
    $(".big_goods").html(
      str1 +
      `<div class="floor">
              ${str3}
              </div>`
    );
    $(".goodscontent").hover(function () {
      $(this).css({
        border: "2px solid red",
        cursor: "pointer",
      })
    }, function () {
      $(this).css({
        border: "none"
      })
    })

    //渲染后给楼层添加事件
    var t = getComputedStyle($(".floor")[0], null).top.slice(0, 3);
    var h = $(".floor").height();
    var H = t - h / 2;
    floorAddEvent();

    function floorAddEvent() {
      $(".floor").css({
        display: "none",
      });

      $(document).on("scroll", function () {
        if (document.documentElement.scrollTop > 840) {
          $(".floor")
            .css({
              display: "block",
            })
            .stop()
            .animate({
                height: h,
                top: H,
              },
              100
            );
        } else {
          $(".floor")
            .stop()
            .animate({
                height: 0,
                top: t,
              },
              100,
              function () {
                $(".floor").css({
                  display: "none",
                });
              }
            );
        }
      });
      //添加点击事件
      $(".floor")
        .children("a")
        .on("click", function () {
          $("html")
            .stop()
            .animate({
              scrollTop: 870 + $(this).index() * 820,
            });
        });
    }
    //给a标签添加点击事件
    $(".goodscontent").children("a").on("click", function () {
      let url = "http://localhost:81/api"
      $.ajax({
        type: "get",
        url: url,
        data: {
          type: "goods",
          id: this.getAttribute("data_id"),
          time: this.getAttribute("data_time")
        },
        success: (res) => {
          window.location.href = `http://localhost:81/html/goods.html?id=${JSON.parse(res).id}&time=${JSON.parse(res).time}`;

        }
      })
    })
  }

  //楼层导航部分
})();

//固定右侧栏
(function () {
  $(document).on("scroll", function () {
    if (document.documentElement.scrollTop > 629) {
      $(".aside").css({
        position: "fixed",
        top: 60,
      });
    }
    if (document.documentElement.scrollTop < 629) {
      $(".aside").css({
        position: "absolute",
        top: 720,
      });
    }
  });
})();

//回到顶部
(function () {
  $(".aside")
    .find("li")
    .eq(4)
    .on("click", function () {
      $("html").stop().animate({
          scrollTop: 0,
        },
        200
      );
    });
})();

//登录下面的选项卡
(function () {
  $(".load_select")
    .find("li")
    .on("click", function () {
      $(this)
        .css({
          borderColor: "red red white red",
        })
        .siblings()
        .css({
          borderColor: "#c9c9c9",
        });
      $(".load_msg")
        .eq($(this).index())
        .css({
          display: "block",
        })
        .siblings(".load_msg")
        .css({
          display: "none",
        });

      return false;
    });

})();
//登录注册事件
(function () {
  $(".register").on("click", function () {
    window.location.href = "http://localhost:81/html/register.html"
  })
  $(".little_load").on("click", function () {
    window.location.href = "http://localhost:81/html/load.html"

  })
})()